<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script src="https://cdn.staticfile.net/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <!-- message 会传到capitalize方法里面处理 -->
  
  <p>{{ message  | capitalize }}</p>
  <input v-model="message">
  <button v-on:click="reverseMessage">Reverse Message</button>
  <!-- 完整语法 -->
  <a v-bind:href="url">百度</a>
  <p>{{ info.sites }}</p>
    <!-- 缩写 -->
   <a :href="url">百度</a>
   <div v-for="site in info.sites">
   {{ site.name }}
 </div>
</div>

<script>
new Vue({
  el: '#app', //id 等于app的元素

  data: {
    message: 'hello Vue.js!',
    url: 'https://www.baidu.com',
    info: {}
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('');
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  mounted () {
    axios
      .get('/api/v1/hello')  
      .then(response => (this.info = response.data))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }

})
</script>
</body>
</html>